<section class="column">
  <app-view-header>
    <i class="fa fa-heart" aria-hidden="true"></i> Liked Tracks
  </app-view-header>


  <app-tab-bar (tabChange)="selectTab($event)">
    <app-tab-pane
      *ngFor="let account of accounts.models"
      [id]="account.provider"
      [title]="availableProviderMap[account.provider].title"
      [icon]="availableProviderMap[account.provider].icon">
      <div *ngIf="tracks.length>0">
        <div *ngFor="let track of tracks | limitCollectionresults: {limit: 10}">
          <app-context-menu>
            <app-track-list-item [track]="track" [tracks]="tracks">
              <app-options-btn>
                <app-add-to-queue-option [track]="track"></app-add-to-queue-option>
                <app-shuffle-play-option [track]="track" [tracks]="tracks"></app-shuffle-play-option>
                <app-add-to-playlist-option [track]="track"></app-add-to-playlist-option>
                <app-options-option-btn
                  icon="fa fa-trash"
                  title="Delete" (action)="deleteTrack(track)">
                </app-options-option-btn>
              </app-options-btn>
            </app-track-list-item>
          </app-context-menu>
        </div>
        <app-list-footer [collection]="tracks" text="favourited tracks"></app-list-footer>
      </div>

      <app-empty-state *ngIf="isSyncing()"
                       title="Loading your favourited tracks"
                       icon="fa fa-heart-o">
      </app-empty-state>

      <app-empty-state *ngIf="tracks.length === 0 && !isSyncing() && account.isConnected()"
                       title="Your favourite tracks will appear here"
                       icon="fa fa-heart-o"
                       ctaLink="/"
                       ctaText="Search for a track">
      </app-empty-state>

      <app-empty-state *ngIf="!account.isConnected()"
                       title="Connect with {{availableProviderMap[account.provider].title}} to syncronize your favourite tracks"
                       [icon]="availableProviderMap[account.provider].icon"
                       (ctaClick)="connect(account)"
                       ctaText="Login with {{availableProviderMap[account.provider].title}}">
      </app-empty-state>

    </app-tab-pane>
  </app-tab-bar>
</section>
